<template>
  <div>
    <van-nav-bar fixed placeholder>
      <template #left>
        <van-tabs v-model="active" @change="switchList">
          <van-tab title="推荐"></van-tab>
          <van-tab title="最新"></van-tab>
        </van-tabs>
      </template>
      <template #right> <span class="article-title">面经</span> </template>
    </van-nav-bar>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ArticleItem
        v-for="item in articleList"
        :key="item.id"
        :article="item"
      ></ArticleItem>
    </van-list>
  </div>
</template>

<script>
import { getArticleList } from "../api/article";
export default {
  data() {
    return {
      active: 0,
      currentPage: 1,
      loading: false,
      finished: false,
      articleList: [],
    };
  },

  created() {
    this.loadArticleList();
  },

  methods: {
    async loadArticleList() {
      const sorter = this.active == 0 ? "weight_desc" : undefined;
      const list = await getArticleList(this.currentPage, sorter);
      if (this.currentPage === 1) {
        this.articleList = list.data.data.rows;
      } else {
        this.articleList = [...this.articleList, ...list.data.data.rows];
      }
      // 判单没有更多数据了、当前页 === 总页数
      this.finished = this.currentPage === list.data.data.pageTotal;
      // 加载状态结束
      this.loading = false;
    },

    onLoad() {
      this.currentPage++;
      this.loadArticleList();
    },

    switchList() {
      // 清空当前列表
      this.articleList = [];
      // 切换列表，重置finished
      this.finished = false;
      // 加载另外一个列表，第一页数据
      this.currentPage = 1;
      // 设置加载 为true
      this.loading = false;
      // 加载数据
      this.loadArticleList();
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .van-tabs__line {
  width: 20px;
}

.article-title {
  font-weight: bold;
  font-size: 32px;
  color: #fa6d1d;
}
</style>
